<template>
  <div class="pane">
    <div
      v-if="loggedIn"
      class="order-list"
    >
      <mt-loadmore
        ref="loadmore"
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="historyOrder.allLoaded"
      >
        <div
          v-for="item in historyOrder.records"
          :key="item.id"
          class="order-card"
        >
          <div class="order-card-item right">
            <div class="item-row first">
              <div class="row-symbol">{{$t('成交额')}}：{{ item.deal_money | numberFormat() }}{{ coinPair.money }}</div>
              <div class="row-trade">
                <span
                  class="trade-icon"
                  :class="{buy: item.side === 2}"
                />
                <span class="trade-text">{{ item.side === 2 ? $t('买入') : $t('卖出') }}</span>
              </div>
            </div>
            <div class="item-row">
              <div class="row-amount">{{$t('已成交')}}/{{$t('未成交')}}：{{ item.deal_stock | numberFormat() }}/{{ item.amount - item.deal_stock }}</div>
            </div>
            <div class="item-row">
              <div class="row-price">{{$t('成交价格')}}：{{ item.price | numberFormat() }}</div>
            </div>
            <div class="item-row">
              <div class="row-price">{{$t('手续费')}}：{{ item.deal_fee | numberFormat() }} {{ item.side === 2 ? coinPair.stock : coinPair.money }}</div>
              <div class="row-time">{{ item.ftime | timeFormat() }}</div>
            </div>
          </div>
        </div>
      </mt-loadmore>
    </div>
    <div
      v-else
      class="jilu"
    >
      <i class="iconfont icon-chazhaojilu"></i>
      <div style="clear: both;"></div>
      <nuxt-link to="/login">{{$t('去登陆')}}</nuxt-link>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import { Loadmore } from 'mint-ui'
export default {
  components: {
    [Loadmore.name]: Loadmore
  },
  data () {
    return {
      isLoadTop: false
    }
  },
  computed: {
    ...mapState({
      loggedIn: ({ auth }) => auth.loggedIn,
      symbol: ({ exchange }) => exchange.symbol,
      serverAuthed: ({ exchange }) => exchange.serverAuthed,
      historyOrder: ({ exchange }) => exchange.historyOrder
    }),
    ...mapGetters({
      coinPair: 'market/coinPair'
    })
  },
  watch: {
    serverAuthed (val, oldVal) {
      if (val) {
        this.uploadHistoryOrder(this.symbol)
      }
    },
    symbol (val) {
      if (val) {
        this.uploadHistoryOrder(val)
      }
    }
  },
  beforeMount () {
    if (this.serverAuthed) {
      this.uploadHistoryOrder(this.symbol)
    }
  },
  methods: {
    ...mapActions({
      queryHistoryOrder: 'exchange/queryHistoryOrder'
    }),
    uploadHistoryOrder (symbol, offset = 0) {
      const payload = {
        symbol,
        offset,
        limit: this.limit
      }
      this.queryHistoryOrder(payload)
    },
    loadTop () {
      this.isLoadTop = true
      this.uploadHistoryOrder(this.symbol)
      this.$refs.loadmore.onTopLoaded()
    },
    loadBottom () {
      if (!this.isLoadTop && this.historyOrder.records.length === 0) {
        // 等同下拉刷新效果
        this.uploadHistoryOrder(this.symbol)
      } else {
        const offset = this.historyOrder.offset + this.historyOrder.limit
        this.uploadHistoryOrder(this.symbol, offset)
      }
      this.$refs.loadmore.onBottomLoaded()
    }
  }
}
</script>
<style scoped>
.order-list {
  padding: 0 2px;
  overflow-y: auto;
}
.order-card {
  display: flex;
  padding: 10px 8px;
  border-bottom: 1px solid #f3f3f3;
}
.order-card-item.left {
  display: flex;
  align-items: center;
}
.order-card-item.right {
  flex: 1;
}
.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-row.first {
  margin-bottom: 12px;
}
.row-symbol {
  font-size: 16px;
}
.row-time {
  font-size: 12px;
  color: #999;
}
.row-amount {
  font-size: 12px;
  color: #999;
}
.row-price {
  font-size: 12px;
  color: #999;
}

.trade-icon {
  width: 10px;
  height: 10px;
  background-color: #d14b64;
  display: inline-block;
}
.trade-icon.buy {
  background-color: #03ac8f;
}
.trade-text {
  font-size: 14px;
}
</style>
